<template>
  <view class="content ">

    <view style="padding: 24rpx 32rpx;">
      <view class="ordersmain">
        <view class="ordermainone">
          <view class="orderleft">{{ orderlist.merchantName }}</view>
          <!-- <view class="orderright">商家自送</view> -->
        </view>
        <view class="ordermaintwo" v-for="(item, index) in orderlist.orderProductsList" :key="index">
          <view>
            <image :src="item.productImg" mode="scaleToFill" />
          </view>
          <view class="flex_1 pad024">
            <view class="ordertwoname yw-text-cut-2 ">{{ item.productName }}</view>
            <view class="ordertwonum flexB">
              <text class="ordertwotop">x{{ item.productCount }}</text>
              
            </view>
          </view>
        </view>
        <!-- <view class="orderlineCss" style="color: #999;">
          物流费：￥{{ '40' }}
        </view> -->
        <view class="pay">
          <view>退款金额</view>
          <view class="flexAlginC">
            <view style="color: #FF0000;">￥{{ orderlist.payMoney / 100 }}</view>
          </view>
        </view>
        <view class="pay">
          <view>支付方式</view>
          <view class="flexAlginC">
            <image src="../static/image/pagesDelivery/alipay.png" mode="scaleToFill" />
            <view style="font-weight: 600; color: #424141;">支付宝</view>
          </view>
        </view>
      </view>
      <!--1 退货退款   2仅退款-->
      <view class="bgWhite fs-28 contCss">
        <view class="Conttitle">
          退款原因
        </view>
        <view class="w-100 ContBorder flexB" @tap="refundClick">
          <view class="black" v-if="form && form.refundReason">
            {{ form.refundReason }}
          </view>
          <view class="" v-else>
            请选择退款原因
          </view>
          <u-icon name="arrow-right" color="#000" size="28"></u-icon>
        </view>
        <view class="Conttitle">
          退款说明
        </view>
        <view class="w-100 ContBorder">
          <u-input v-model="form.noteValue" :border="false" />
        </view>
        <view v-if="this.orderlist.orderStatus>3" class="Conttitle">
          商品图片
        </view>
        <view v-if="this.orderlist.orderStatus>3" class="Conttitle">
          <u-upload width="140" height="140" :custom-btn="true" @on-choose-fail="onChooseFail"
            :before-remove="beforeRemove" ref="uUpload" :show-upload-list="true" :action="action" :auto-upload="true"
            :file-list="fileList" :show-progress="true" :deletable="true" :header="uploadToken" :max-count="3"
            @on-list-change="onListChange" @on-remove="uploadRemove" @on-success="uploadSuccess" :size-type="['compressed']" :max-size="FileSize">
            <view slot="addBtn">
              <image src="/static/image/upload_icon.png" mode=""
                style="width: 140rpx;height: 140rpx;border-radius: 12rpx;"></image>
            </view>
          </u-upload>
        </view>
      </view>
      <!-- 防止按钮遮挡页面 -->
      <view style="padding-bottom: 180rpx;"></view>
      <view class=" p-fixed" style="padding-bottom: 0rpx;bottom: 72rpx;left: 32rpx;">
        <view @tap="BtnClick" class="confirmBtn flexC">
          <text>提交</text>
        </view>
      </view>
    </view>
    <!-- 货物状态 类型 -->
    <u-picker mode="selector" v-model="goodsStatusShow" :default-selector="[0]" :range="goodsStatusSelector"
      range-key="name" @confirm='goodsStatusConfirm'></u-picker>
    <!-- 退款说明 类型 -->
    <u-picker mode="selector" v-model="refundShow" :default-selector="[0]" :range="refundSelector"
      @confirm='refundConfirm'></u-picker>
  </view>
</template>
<script>
import { getUserOrderInfo, orderReturn } from '@/api/common'
import { BASE_URL_IMG } from '@/api/request'
import { FileSize } from '@/common/fileSize';
let that = null;
export default {
  data() {
    return {
      FileSize,
      id: null, //
      form: {
        noteValue: '',
        goodsStatus: null,
        refundReason: null,
      },
      statusBarHeight: null,
      shoplist: [{
        id: "0",
        img: "https://img2.baidu.com/it/u=3597756135,179698068&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1718902800&t=24043e4e9fb78f26c6f85e62aa0f87c2",
        name: "瓜好西瓜好西瓜好西瓜好西瓜瓜好西瓜好西瓜好西瓜好西瓜瓜好西瓜好西瓜好西瓜好西瓜瓜好西瓜好西瓜好西瓜好西瓜",
        num: 50,
        price: 12,
        rightType: false,
        shopnum: 2
      }],
      addlist: [],
      allPrice: '33.05',
      lists: [],
      action: '',
      fileList: [],
      nowFileList: [],
      uploadToken: {
        Authorization: ''
      },
      goodsStatusShow: false,
      goodsStatusSelector: [
        {
          id: 1,
          name: "已收货"
        },
        {
          id: 2,
          name: "未收货"
        }
      ],
      refundShow: false,
      refundShowtwo: false,
      refundShowthree: false,
      refundSelector: ['刷销量', '刷评价', '引导收藏,转单', '其他'],
      someid: 0,
      orderNum: '',
      orderlist: []
    }
  },
  onReady() { },
  onLoad(opt) {
    this.action = BASE_URL_IMG
    console.log('BASE_URL', this.action);
    this.uploadToken.Authorization = uni.getStorageSync('token')
    console.log('我看opt', opt)
    this.orderNum = opt.orderNum
    that = this
    that.statusBarHeight = uni.getStorageSync('statusBarHeight')
    console.log('导航栏高度:', that.statusBarHeight);
    this.id = opt.id; //<!--1 退货退款   2仅退款-->
    console.log(this.id)
  },
  onShow() {
    this.getorder()
  },
  methods: {
    // 返回
    back() {
      uni.navigateBack()
    },
    getorder() {
      let obj = {
        orderNum: this.orderNum
      }
      getUserOrderInfo(obj).then(res => {
        console.log('订单详情', res)
        this.orderlist = res.data
      })
    },
    BtnClick() {
      if(!this.form.refundReason){
        this.$u.toast('请选择退款原因');
      } else if(this.orderlist.orderStatus>3 && !this.form.noteValue) {
        this.$u.toast('请正确填写退款内容');
      }else if(this.nowFileList.length === 0 && (this.orderlist.orderStatus === 9 || this.orderlist.orderStatus === 10)){
        this.$u.toast('请正确上传商品图片');
      } else {
        let obj = {
          orderNum: this.orderNum,
          refReason: this.form.refundReason,
          refExplain: this.form.noteValue,
          orderRefImgList: this.nowFileList
        }
        console.log('看看传什么',this.nowFileList);
        orderReturn(obj).then(res => {
          console.log('退款', res)
          // uni.redirectTo({
          //   url: '/pagesAgriculture/agricultureWaitPay?orderNum=' + this.orderNum
          // })
          uni.navigateBack({
            delta: 0,
            orderNum: this.orderNum
          })
        })
      }
    },
    goodsStatusClick() {
      console.log('货物状态')
      this.goodsStatusShow = true
    },
    refundClick() {
      console.log('退款说明')
      this.refundShow = true
    },
    goodsStatusConfirm(index) {
      console.log('货物状态')
      this.form.goodsStatus = this.goodsStatusSelector[index]
      this.someid = this.goodsStatusSelector[index].id
      console.log('看看东西', this.form.goodsStatus)
    },
    refundConfirm(index) {

      this.form.refundReason = this.refundSelector[index]
    },
    beforeRemove(index, lists) {
      console.log('看看这是什么',index)
      console.log("aaa", this.nowFileList);
    },
    onListChange(lists) {
      console.log('onListChange', lists);
      this.lists = lists;
    },
    uploadSuccess(e) {
      this.nowFileList.push(e.data)
      console.log("aaa", e);
    },
    uploadRemove(index) {
      this.nowFileList.splice(index,1)
    },
    onChooseFail(e) {
      console.log(e);
    },
  },
}
</script>

<style scoped lang="scss">
@import "@/api/main.css";

.content {
  background: #E6E6E6;
  min-height: 100vh;



  .topImg {
    width: 100vw;
    padding: 32rpx 32rpx 0rpx;

    .topBtn {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #000;
    }
  }

  .ordersmain {
    border-radius: 8rpx;
    padding: 32rpx 22rpx;
    background-color: white;
    margin: 18rpx 0;

    .ordermainone {
      display: flex;
      justify-content: space-between;

      .orderleft {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 32rpx;
        color: #000000;

        font-style: normal;
      }

      .orderright {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #d12c25;

        font-style: normal;
      }
    }

    .ordermaintwo {
      display: flex;
      margin-top: 18rpx;
      font-family: PingFang SC, PingFang SC;

      image {
        width: 156rpx;
        height: 132rpx;
      }

      .ordertwoname {
        font-weight: 400;
        font-size: 32rpx;
        color: #000000;
        line-height: 38rpx;
        font-style: normal;
      }

      .ordertwonum {
        margin-top: 10rpx;

        .ordertwotop {
          font-weight: 400;
          font-size: 26rpx;
          color: #999999;
        }

        .ordertwobottom {
          font-weight: bold;
          font-size: 28rpx;
          color: #ff0000;
        }
      }
    }

    .Distribution {
      margin-top: 18rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 32rpx;
      color: #999999;

      font-style: normal;
    }

    .pay {
      margin-top: 18rpx;
      display: flex;
      justify-content: space-between;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 32rpx;
      color: #000000;

      font-style: normal;

      image {
        width: 36rpx;
        height: 36rpx;
        margin-right: 14rpx;
      }
    }

    .orderlineCss {
      margin-top: 18rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 32rpx;
      color: #000000;

    }
  }


  .confirmBtn {
    width: 686rpx;
    height: 96rpx;
    background: #D12C25;
    border-radius: 1998rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 32rpx;
    color: #FFFFFF;
    font-style: normal;
    text-transform: none;
  }

  .contCss {
    padding: 24rpx 32rpx;
    border-radius: 8rpx;

    .Conttitle {
      margin-bottom: 18rpx;
    }

    .ContBorder {
      border: 1rpx solid #999;
      color: #999;
      padding: 8rpx 24rpx;
      margin-bottom: 24rpx;
      border-radius: 4rpx;
    }

  }
}
</style>